<template>
  <div class="width100 ">
    <div class="main_padd">
      <div>
        首页 > 视频案例
      </div>
      <div class="yingyin_list">
        <div class="row justify-content-start align-items-center no-gutters yingyin_list_all">
          <div class="yingtu_name">用途分类:</div>
          <div class="row justify-content-start no-gutters yingyin_list_list">
            <div>全部</div>
            <div>广告配音</div>
            <div>广告配音</div>
            <div class="list_click">广告配音</div>
            <div>广告配音</div>
            <div>广告配音</div>
          </div>
          <div style="margin-left: auto;">123<span class="yellcolorsize">12</span></div>
        </div>
      </div>

      <div class="">
        <div class="row justify-content-around  no-gutters">

          <div class="col-6 col-md-2  ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-2 ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-2 ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-2 ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-2 ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-2 ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-2 ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-2 ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-2 ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-2 ">
            <div class="case_main_child ">
              <div><img src="../static/10026.jpg" alt=""></div>
              <div class="main_text">视频1新闻</div>
              <div class="main_text_hover">
                <div class="z_index6 position_ab main-img text-center">视频2新闻</div>
                <div
                  class="main_text_hover_bottom row align-items-center justify-content-between no-gutters rowcaijiankuan z_index6">
                  <div class="row align-items-center no-gutters"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
                      <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                      <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
                    </svg>123</div>
                  <div>04.25</div>
                </div>
                <div class="main_hover_img"><img src="../static/pexels-cottonbro-studio-4089460.png" alt=""></div>
              </div>
            </div>
          </div>







          <!-- <div class="col-6 col-md-2   yangyin_Listtwo ">
            <div class="case_main_child ">
                <div><img src="../static/10026.jpg"  alt=""></div>
                <div class="main_text">视频1新闻</div>

            </div>


          </div> -->






        </div>
      </div>

      <div class="">
        <nav aria-label="Page navigation example">
          <ul class="pagination justify-content-center align-items-center">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div>
        132
      </div>
    </div>
  </div>
</template>

<script>
  export default {

  }

</script>

<style>
  .yangyin_Listtwo {
    max-width: calc(16.666% - 12px);
    padding: 0;
    box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 6%);
    border-radius: 6px;
    margin: 12px 0;
    position: relative;
  }

  .padding_room {
    width: calc(100% - 30px);
    margin: 0 auto;
  }

  /* .case_main_child{
    margin: 0 !important;
} */



</style>
